import React, {useState} from 'react';
import {Card, CardHeader, Divider, Fab, Grid, Tooltip, Typography} from "@material-ui/core";
import Avatar from "@material-ui/core/Avatar";
import CardContent from "@material-ui/core/CardContent";
import IndicatorCard from "../../GQIEditor/Question/IndicatorCard/IndicatorCard";
import Collapse from "@material-ui/core/Collapse";
import SnackbarMessage from "../../Common/Snackbar/SnackbarMessage";
import CodeIcon from '@material-ui/icons/Code';
import IconButton from "@material-ui/core/IconButton";
import clsx from "clsx";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import {useHistory} from "react-router-dom";

export default function QuestionIndicator(props) {
  // Props
  const {
    questionAvatar,
    goal,
    question,
    classes,
    indicators,
    indicatorResponseData,
    questionCode
  } = props;

  // Local constants
  const history = useHistory();
  const [expand, setExpand] = useState(false);
  const [copyCode, setCopyCode] = useState(false);

  const handleCopyQuestionCode = () => {
    navigator.clipboard.writeText(questionCode);
    setCopyCode(!copyCode);
  }

  return (
    <>
      <Card elevation={10}>
        <Grid container>
          <Grid item xs>
            <CardHeader
              avatar={<Avatar className={classes.avatar}><Typography
                variant={"h5"}>{questionAvatar}</Typography></Avatar>}
              title={
                <Grid container alignItems="center">
                  <Grid item xs>
                    <Grid container direction="column">
                      <Typography variant="overline">{goal.name}</Typography>
                      <Typography variant="h6">{question.name}</Typography>
                      <Typography variant="overline">#Indicators: {indicators.length}</Typography>
                    </Grid>
                  </Grid>
                  <Tooltip arrow title={<Typography>Copy HTML Embed Code</Typography>}>
                    <Fab size="small" onClick={handleCopyQuestionCode}
                         className={classes.gutterLeftRightLarge}
                         color="primary">
                      <CodeIcon fontSize="small"/>
                    </Fab>
                  </Tooltip>
                  <Grid item className={classes.gutterLeftRightQuestion}>
                    <Tooltip title={!expand ? <Typography >Show Indicators</Typography> :
                      <Typography >Hide Indicators</Typography>}>
                      <IconButton variant="contained" className={clsx(classes.expand, {
                        [classes.expandOpen]: expand,
                      })} onClick={() => setExpand(!expand)}>
                        <ExpandMoreIcon fontSize="large"/>
                      </IconButton>
                    </Tooltip>
                  </Grid>
                </Grid>
              }
            />
          </Grid>
        </Grid>
        <Collapse in={expand} timeout="auto" unmountOnExit>
          <Divider/>
          <CardContent style={{backgroundColor: '#fff'}}>

            <Grid container direction="column" style={{color: '#000'}} justify="center">
              <Grid item xs={false} sm={1} lg={0}/>
              <Grid container direction="column" justify="center" className={classes.gutterTop}>
                {indicators.map((indicator, index) => {
                  let responseData = indicatorResponseData.find(a => a.indicatorClientID === indicator.id);
                  return (
                    <Grid item xs key={index} className={classes.gutterBottom}>
                      <IndicatorCard indicator={indicator}
                                     selectedIndicators={[]}
                                     responseData={responseData}
                                     classes={classes}/>
                    </Grid>)
                })}
              </Grid>
              <Grid item xs={false} sm={1} lg={0}/>
            </Grid>
          </CardContent>
        </Collapse>
      </Card>
      <SnackbarMessage
        message={<Typography component={'span'}>html embed code copied!</Typography>}
        type={"success"}
        openSnackbar={copyCode}
        setOpenSnackbar={setCopyCode}
        duration={5000}
        buttonAction={() => history.push('/demo')}
        buttonMessage={"Test embed code here"}
      />
    </>
  );
}
